<template>
	<div>
		<Menu menuActive="/blog" />
		<layout>
			<template v-slot:main>
				<el-row>
					<el-col>
						<div class="top_filter_container height_light_bgcolor">
							<div style="text-align: right;">
								<el-button type="primary" :icon="Plus" @click="() => router.push({ name: 'publish-blog' })">{{$t('blogPage.publishBtn')}}
								</el-button>
							</div>
							<div class="filter_search_wrap">
								<span class="filter_name">搜索：</span>
								<div class="filter_search" style="width:500px">
									<el-input placeholder="请输入博客标题" class="input-with-select" v-model="searchParams.title" clearable
										@clear="handleClearSearch">
										<template #append>
											<el-button :icon="Search" @click="handleSerach" />
										</template>
									</el-input>
								</div>
							</div>
							<div class="first_fiter_wrap">
								<span class="filter_name" style="margin-top:0">方向：</span>
								<el-tag class="cursor_class tag_item" size="large"
									:effect="currentIndexDirect === index && directId === item.id ? 'dark' : 'light'"
									:type="currentIndexDirect === index && directId === item.id ? '' : 'info'"
									v-for="(item, index) in directionData" :key="item.id" @click="handleClickTagDirect(index, item)">{{
											item.name
									}}</el-tag>
							</div>
							<div class="second_fiter_wrap">
								<span class="filter_name">分类：</span>
								<el-select @change="handleChangeGroups" style="width:500px" v-model="groups" placeholder="请选择分类"
									multiple collapse-tags>
									<el-option v-for="item in groupsOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
						</div>
						<div class="bottom_content_container height_light_bgcolor">
							<div class="tab_wrapper">
								<el-tabs v-model="activeName" @tab-click="handleClick">
									<el-tab-pane :label="items.label" :name="items.name" v-for="items in tabPanel" :key="items.id">
										<div class="tab_pane_wrapper" :style="{ padding: notelistLoading ? '45px 0' : '' }">
											<div v-loading="notelistLoading" element-loading-text="正在玩命加载中...">
												<!-- <Article :data-list="data.dataArr" @liked="handleClickArticleLiked($event, item.name)" /> -->
												<!-- <Article /> -->
												<Article v-for="item in data.dataArr" @liked="handleClickArticleLiked($event, items.name)"
													:key="item.id" :id="item.id" :coverPicture="item.coverPicture" :title="item.title"
													:description="item.description" :groups="item.groups" :likeNum="item.likeNum"
													:nickName="item.user.nickName" :commentCount="item.commentCount"
													:pageViewNum="item.pageViewNum" :createTime="item.createTime" :isLike="item.isLike"
													:directionId="item.directionId" />
											</div>
											<el-empty description="暂无数据~" v-if="!notelistLoading && data.total <= 0" />
											<div class="pagination_container">
												<el-pagination v-model:current-page="searchParams.pageNum"
													v-model:page-size="searchParams.pageSize" background layout="total, prev, pager, next, jumper"
													:total="data.total" v-if="data.total > 0" @current-change="handleCurrentChange" />
											</div>
										</div>
									</el-tab-pane>
								</el-tabs>
							</div>
						</div>
					</el-col>
				</el-row>
			</template>
		</layout>
		<Footer />
	</div>
</template>

<script lang="ts" setup>
import { getDirection, getGroup } from "@/api/dictionary";
import Menu from '@/components/Menu/index.vue'
import Layout from '@/components/Layout/index.vue'
import Footer from '@/components/Footer/index.vue'
import Article from '@/components/Article/index.vue'
import { onMounted, reactive, ref, toRefs } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { Search, Plus } from '@element-plus/icons-vue'
import router from '@/router'
import { getBlogList } from "@/api/index";
import i18n from '@/i18n/index'
import Paginations from "@/components/Pagination/index.vue";
type Params = {
	pageNum: number,
	pageSize: number,
	title?: string
}
const tabPanel = ref([{
	id: 1,
	name: 'first',
	label:'最新',
	// label: i18n.global.t('indexTitle.articleTitle2')
}, {
	id: 2,
	name: 'second',
	label:'热门',
	// label: i18n.global.t('indexTitle.articleTitle3')
}, {
	id: 3,
	name: 'third',
	label:'最多点赞',
	// label: i18n.global.t('indexTitle.articleTitle4')
}])
const activeName = ref<any>('first')
const currentIndexDirect = ref<number>(0)
const directId = ref<number | null>(null)
const directionData = ref<any[]>([])
const notelistLoading = ref(false)
const searchParams = reactive<Params>({
	pageNum: 1,
	pageSize: 10,
	title: ''
})
const { data } = toRefs(reactive<any>({
	data: {
		dataArr: [],
		total: 0
	}
}))
const total = ref<number>(0)
const groupsOptions = ref<any>([])
const groups = ref<any>('')
const handleClickTagDirect = async (index: number, obj: any) => {
	currentIndexDirect.value = index
	directId.value = obj.id
	await getGroupData()
	searchParams.pageNum = 1
	activeName.value = 'first'
	groups.value = ''
	getBlogListData()
	// 清空路由参数
	router.push('/blog')
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
	searchParams.pageNum = 1
	activeName.value = tab.props.name
	if (activeName.value === 'first') {
		getBlogListData()
	} else if (activeName.value === 'second') {
		getBlogListData({ isHot: 1 })
	} else if (activeName.value === 'third') {
		getBlogListData({ searchValue: 1 })
	}
}
// 获取全部方向
const getDirectionData = async () => {
	const { data }: any = await getDirection()
	directionData.value = data
	// 判断路由是否有参数
	const { dirId } = router.currentRoute.value.query
	if (dirId) {
		let x = directionData.value.findIndex((item) => item.id == dirId)
		currentIndexDirect.value = x
		directId.value = Number(dirId)
		return
	}
	directId.value = data[0].id
}
// 筛选全部分类
const getGroupData = async () => {
	const { data }: any = await getGroup()
	let filterArr = data.filter((item: { directionId: number | null }) => {
		return item.directionId === directId.value
	})
	groupsOptions.value = filterArr.map((item: { name: any; id: any; }) => ({ label: item.name, value: item.id }))
	// 判断路由是否有参数
	const { tagname } = router.currentRoute.value.query
	if (tagname) {
		const decodeString = decodeURIComponent(tagname as string)
		let obj = groupsOptions.value.find((item: { label: string; }) => item.label === decodeString)
		// console.log(obj);
		if (obj) {
			groups.value = [obj.value]
		}
	}
}
// 获取博客列表
const getBlogListData = async (cate?: any) => {
	try {
		notelistLoading.value = true
		let groupStr = ''
		if (groups.value) {
			groupStr = groups.value.toString()
		}
		let params = {
			pageNum: searchParams.pageNum,
			pageSize: searchParams.pageSize,
			directionId: directId.value,
			groups: groupStr,
			title: searchParams.title
		}
		const { rows, total }: any = await getBlogList({ ...cate, ...params })
		data.value.dataArr = rows
		data.value.total = total
	} finally {
		notelistLoading.value = false
	}
}
// 监听点赞，更新数据
const handleClickArticleLiked = (e: any, name: string) => {
	if (name === 'first') {
		getBlogListData()
	} else if (name === 'second') {
		getBlogListData({ isHot: 1 })
	} else if (name === 'third') {
		getBlogListData({ searchValue: 1 })
	}
}
const handleCurrentChange = (val: number) => {
	searchParams.pageNum = val
	getBlogListData()
}
const handleChangeGroups = (val: any) => {
	groups.value = val
	// 清空路由参数
	router.push('/blog')
	getBlogListData()
}
// 搜索
const handleSerach = () => {
	searchParams.pageNum = 1
	activeName.value = 'first'
	getBlogListData()
}
const handleClearSearch = () => {
	searchParams.pageNum = 1
	searchParams.title = ''
	activeName.value = 'first'
	getBlogListData()
}
onMounted(async () => {
	await getDirectionData()
	await getGroupData()
	getBlogListData()
})
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
